<template>
  <div class="home">
    <a-row style="margin: -10px -5px 50px -8px;" class="monitor-list">
      <a-col :span="24" class="unit" v-if="QX.order">
        <a-card :bordered="false" style="height: 278px;">
          <div class="todo-title">
            生产订单信息
          </div>
          <Order></Order>
        </a-card>
      </a-col>
      <a-col :span="QX.producePlanReachRate?12:24" v-if="QX.plans" class="unit">
        <a-card :bordered="false" style="height: 278px;">
          <div class="todo-title">
            当月各工序日计划完成率排名
            <div class="month">
              <a-select  v-model="planType" placeholder="请选择计划类型">
                <a-select-option  value="001" >
                  日计划
                </a-select-option>
                <a-select-option  value="002" >
                  周计划
                </a-select-option>
              </a-select>
            </div>
          </div>
          <Plans :planType="planType"></Plans>
        </a-card>
      </a-col>
      <a-col :span="QX.plans?12:24" class="unit" v-if="QX.producePlanReachRate">
        <a-card :bordered="false" style="height: 278px;">
          <div class="todo-title">
            生产计划达成率统计
            <div class="month">
              <a-month-picker style="width: 100px" v-model="producePlanReachRateDate" :defaultValue="moment(getCurrentMonth, 'YYYY-MM')"  valueFormat="YYYY-MM"
                              :allowClear=false />
            </div>
          </div>
          <ProducePlanReachRate :producePlanReachRateDate="producePlanReachRateDate?producePlanReachRateDate:getCurrentMonth"></ProducePlanReachRate>
        </a-card>
      </a-col>
      <a-col :span="24" class="unit" v-if="QX.productTestFpy">
        <a-card :bordered="false" style="height: 278px;">
          <div class="todo-title">
            产品测试直通率统计
              <div class="month">
                <a-month-picker style="width: 100px" v-model="productTestFpyDate" :defaultValue="moment(getCurrentMonth, 'YYYY-MM')"  valueFormat="YYYY-MM"
                                :allowClear=false />
              </div>
          </div>
          <ProductTestFpy :productTestFpyDate="productTestFpyDate?productTestFpyDate:getCurrentMonth"></ProductTestFpy>
        </a-card>
      </a-col>
      <a-col :span="24" class="unit" v-if="QX.productPassRate">
        <a-card :bordered="false" style="height: 278px;">
          <div class="todo-title">
            成品交验合格率统计
            <div class="month">
              <a-month-picker style="width: 100px" v-model="productPassRateDate" :defaultValue="moment(getCurrentMonth, 'YYYY-MM')"  valueFormat="YYYY-MM"
                              :allowClear=false />
            </div>
          </div>
          <ProductPassRate :productPassRateDate="productPassRateDate?productPassRateDate:getCurrentMonth"></ProductPassRate>
        </a-card>
      </a-col>
      <a-col :span="24" class="unit" v-if="QX.incomingRate">
        <a-card :bordered="false" style="height: 278px;">
          <div class="todo-title">
            来料合格率统计
            <div class="month">
              <a-month-picker style="width: 100px" v-model="incomingRateDate" :defaultValue="moment(getCurrentMonth, 'YYYY-MM')"  valueFormat="YYYY-MM"
                              :allowClear=false />
            </div>
          </div>
          <IncomingRate :incomingRateDate="incomingRateDate?incomingRateDate:getCurrentMonth"></IncomingRate>
        </a-card>
      </a-col>
      <a-col :span="24" class="unit" v-if="QX.equipmentMonitor">
        <a-card :bordered="false" >
          <div class="todo-title">
            设备监控
          </div>
          <Device></Device>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { req } from '../../../api/axiosFun';
import preventBack from 'vue-prevent-browser-back';
import moment from 'moment';
import {chunk,getCurrentMonth } from '../../../until';
import Todo from './Todo'
import Note from './Note'
import Kpi from './Kpi'
import Device from './Device'
import Order from './Order'
import Abnormal from './Abnormal'
import Plans from './Plans'
import AdverseTrends from './AdverseTrends'
import ProductTestFpy from './ProductTestFpy'
import ProductPassRate from './ProductPassRate'
import ProducePlanReachRate from './ProducePlanReachRate'
import IncomingRate from  './IncomingRate'
import TableTootip from '../../../components/TableTootipHome.vue'
export default {
  name: 'home',
  mixins: [preventBack],//注入
  components: {
    Todo,
    Note,
    Kpi,
    Device,
    Order,
    Abnormal,
    Plans,
    AdverseTrends,
    TableTootip,
    ProductTestFpy,
    ProductPassRate,
    ProducePlanReachRate,
    IncomingRate
  },
  data() {
    return {
      QX: {},
      monitorList: [],
      title: '待办事项',
      repairDate: '',
      productTestFpyDate: '',
      productPassRateDate: '',
      producePlanReachRateDate: '',
      incomingRateDate: '',
      planType: '001'//计划类型
    };
  },
  // 监听属性 类似于data概念
  computed: {
    monitorListComputed() {
      let monitorList = this.monitorList
      monitorList.forEach((item,index)=>{
        if(!item.data.length) {
          monitorList.splice(index,1)
        }
        if(item.data.length>=4) {
          item.childList = chunk(item.data,4)
        }
      })
      return monitorList
    },
    //当前月
    getCurrentMonth(){
      return getCurrentMonth()
    },
    //元器件不良趋势统计月份
    month(date){
      var month = this.repairDate?this.repairDate.substring(5,7):this.getCurrentMonth.substring(5,7)
      if(month.substring(0,1) == '0'){
        month = month.substring(1,2)
      }
      return month
    }
  },
  created() {
    this.getDataBoardInit()
  },
  mounted() {
    this.getNotification()
  },
  beforeDestroy() {
    this.$notification.close('note')
  },
  methods: {
    moment,
    //权限
    getDataBoardInit() {
      req('post', `dataBoard/getDataBoardInit`)
        .then(res => {
          if (res.result === 'success') {
              this.QX = res.QX
            if(this.QX.monitor) {
              this.getPlatformMonitor()
            }
          }
        })
    },
    getNotification(){
      req('post', `process/selectIncomplete`)
        .then(res => {
          if (res.result === 'success') {
            var data = res.data,content = []
            if(JSON.stringify(data) !== "{}"){
              for (let key in data) {
                var userCode = data[key];
                for (let j in userCode) {
                  content.push({
                    name:j,
                    value:userCode[j]
                  })
                }
              }
              this.openNotification(content)
            }
          }
        })
    },
    //通知
    openNotification(content) {
      this.$notification.open({
        message: '通知',
        key:'note',
        description: h=>{
          var inner = []
          content.forEach(item=>{
            inner.push(h(
              'div', [
                h(
                  'span',
                  ['您有']
                ),
                h(
                  'span',
                  {
                    attrs: {
                      style: 'color: #f5222d'
                    }
                  },
                  [item.value]
                ),
                h(
                  'span',
                  ['个']
                ),
                h(
                  'span',
                  {
                    attrs: {
                      style: 'color: #f5222d'
                    }
                  },
                  [item.name]
                ),
                h(
                  'span',
                  ['的待办事项']
                )
              ]
            ),)
          })
          return h('div', inner)
        },
        duration: 10,
        style: {
          width: '250px',
          marginLeft: `${380 - 250}px`,
        },
      });
    },
    //通讯监控
    getPlatformMonitor() {
      req('post', `dataBoard/getPlatformMonitor`)
        .then(res => {
          if (res.result === 'success') {
            this.monitorList = res.data
          }
        })
    },
    //待办
    getMore(){
      this.$router.push({ path: '/todo' });
    },
  }
};


</script>
<style lang="less" scoped>
@import "../../../assets/css/maincss.css";
.lay-content>div {
  background: none;
  height: auto;
  padding: 0 0;
}
/deep/ .ant-carousel{
  transform: translate3d(0,0,0)
}
.monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
.span-12 {
  width: 75%;
}
.span-4 {
  width: 25%;
}
.span-5 {
  width: 20%;
}
.span-6 {
  width: 33.3%;
}
/deep/ .span-6 .ant-card-body {
  padding: 20px 16px;
}
.plat-title {
  font-size: 20px;
  font-weight: bold;
  color: #555;
}
.monitor-list-inner {
  width: 97%;
  height: 168px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000; /* Other transform properties here */
}
.monitor-text {
  font-size: 12px;
  margin: 8px 0 6px;
  opacity: .8;
}
/deep/ .ant-list-item {
  padding: 10px 0;
}
.monitor-title {
  display: flex;
  align-items: center;
  width:180px;
  font-size: 14px;
}
.monitor-time {
  flex: 1;
  /*max-width:140px;*/
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.monitor-dot {
  width: 6px;
  height: 6px;
  margin-right: 6px;
}
.monitor-status {
  float: right;
}
.monitor-status .ant-tag {
  margin-right: 0;
}
.todo-title {
  position: relative;
  margin-left: 6px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 2;
}
.month {
  position: absolute;
  top: 0;
  right: 0px;
  font-size: 14px;
  font-weight: normal;
}
.more {
  position: absolute;
  top: 2px;
  right: 6px;
  transform: rotate(90deg);
  cursor: pointer;
}

.monitor-list {
  display: flex;
  flex-wrap: wrap;
}
.unit {
  position: relative;
  padding: 0 5px;
  margin: 10px 0px 0px 0px;
  overflow-y: hidden;
}

.todoList {
  height: 250px;
}
/deep/ .ant-card-head-title {
  font-weight: bold;
}
/deep/ .span-4 .ant-card-body,/deep/ .span-5 .ant-card-body,/deep/ .span-12 .ant-card-body,/deep/ .unit .ant-card-body{
  padding: calc(100vw * 12 / 1920) calc(100vw * 14/ 1920);
}
/deep/ .span-4 .ant-tag,/deep/ .span-5 .ant-tag{
  padding: 0 calc(100vw * 5 / 1920);
  font-size: calc(100vw * 12 / 1920);
}
/deep/ .span-5 .monitor-dot {
  display: none;
}
/deep/ .span-5 .monitor-time {
  max-width:90px;
  margin-right: 5px;
}
/deep/ .span-6 .monitor-time {
  max-width:140px;
}
@media screen and (max-width: 1440px){
  /deep/ .span-5 .ant-card-body {
    padding: calc(100vw * 10 / 1920) calc(100vw * 8 / 1920);
  }
  .plat-title {
    font-size: 16px;
  }
  .monitor-title {
    width:140px;
    font-size: 12px;
  }
  .monitor-time {
    font-size: 12px;
  }
  .todo-title {
    font-size: 14px;
  }
}
</style>
